<template>
	<view class="container">
		<view style=" position:fixed;background-color: rgb(242, 242, 242);z-index: 9999;width: 100%;height: 80rpx;line-height: 80rpx;">
			<text style="position:fixed;left: 35rpx;color: #a5a5a5;">累计邀请人数：{{length}}</text>
			<image @click="dianji()" src="http://images.linglinggong.net/icon1/64.png" style="z-index: 9999; position:fixed;top: 18rpx; left: 90%;width: 40rpx;height:40rpx;" mode="aspectFill"></image>
			
			
			
			</view>
	   <view style="position: relative;top: 80rpx;	margin: 35rpx;" >
			<view  class="single-friend" v-for="(item, index) in friendsList" :key="item.userId">
				<view  style="height: 160rpx;" >
					<image :src="item.pic" mode="aspectFill" style="border-radius:50%;width: 110rpx;height: 110rpx;"></image>
					 <view  v-if="item.usertype==1" style="position: relative;left: 20%;top: -95rpx;line-height: 32rpx;font-size: 28rpx;background: #fbc831;color: #FFFFFF;width: 64rpx;height: 32rpx;border-radius:8rpx;text-align: center;">雇主</view>
					 <view  v-if="item.usertype==0" style="position: relative;left: 20%;top: -95rpx;line-height: 32rpx;font-size: 28rpx;background: #4D8CEE ;color: #FFFFFF;width: 64rpx;height: 32rpx;border-radius:8rpx;text-align: center;">雇员</view> 
					 <view  v-if="item.usertype==-1" style="position: relative;left: 20%;top: -95rpx;line-height: 32rpx;font-size: 28rpx;background: #f5f5f5;color: #a5a5a5;width: 64rpx;height: 32rpx;border-radius:8rpx;text-align: center;">未知</view> 
					<text style="position: relative;left: 32%;top: -132rpx;">{{ item.userName }}<br> <a style="position: relative;font-size: 24rpx;color: #a5a5a5;left: -12%;">{{ item.createTime.slice(0, 11) }}</a></text>
					<text v-if="item.stot==0"  style="position: relative;left: 71%;top: -152rpx;font-size: 32rpx;color: #a5a5a5; ">无效</text>
					<text v-if="item.stot==5"  style="position: relative;left: 71%;top: -152rpx;font-size: 32rpx;color: #a5a5a5; ">无效</text>
					<text v-if="item.stot==4"  style="position: relative;left: 71%;top: -152rpx;font-size: 32rpx;color: #a5a5a5; ">有效</text>
					<text v-if="item.stot==2" style="position: relative;left: 71%;top: -152rpx;font-size: 32rpx;color: #1f1f1f; ">有效</text>
					<text v-if="item.stot==1" style="position: relative;left: 67%;top: -152rpx;font-size: 32rpx;color: #1f1f1f; ">待激活</text>
					<text v-if="item.stot==3" style="position: relative;left: 71%;top: -152rpx;font-size: 32rpx;color: #1f1f1f; ">有效</text>
				<!-- <view style="position: relative;top: -25rpx;border-bottom:2rpx solid #efefef;"></view> -->
				</view>
				</view>
			
               </view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				friendsList:[],
				length:0,
			}
		},
		methods: {
			dianji(){
			uni.navigateTo({ url: '/pages/help/help-detail?id=15' })
				},
			
		},onLoad(options) {
			
			this.friendsList=JSON.parse(options.fr)
			 console.log( JSON.parse(options.fr)) 
			 this.length=JSON.parse(options.fr).length 
			
			
		}
	}
</script>

<style lang="less" scoped>
page {
	background-color: #FFFFFF;
}
.container {
	overflow: hidden;

	& > .fix-title {
		z-index: 1;
		width: 100vw;
		position: fixed;
		
		& > view:first-child {
			background-color: #f2f2f2;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			letter-spacing: 0;
		}
		& > view:nth-child(2) {
			height: 80rpx;
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			border-bottom: 2rpx solid #F2F2F2;
			text {
				flex: 1;//平均分
				color: #888888;
				text-align: center;
			}
		}
	}
	& > .list {
		margin: 0rpx 0 130rpx;
		& > .single-friend {
			background-color: #FFFFFF;
			display: flex;
			position: relative;
			&::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 30rpx;
				width: 690rpx;
				height: 2rpx;
				background: #F2F2F2;
			}
			& > view {
				width: 375rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				
				image {
					margin: 0 30rpx 0 60rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background-color: #C0C0C0;
				}
				text {
					color: #333540;
				}
				
			}
			& > view:last-child {
				justify-content: center;
				text-align: center;
				color: #222222;
			}
		}
	}
	& > .bottom {
		z-index: 1;
		position: fixed;
		bottom: 0;
		width: 100vw;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		& > view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 24%;
			& > image {
				width: 42rpx;
				height: 42rpx;
			}
			& > text {
				font-size: 12px;
			}
		}
		& > view:first-child {
			margin-left: 46rpx;
		}
		& > view:nth-child(2) {
			margin: 0 56rpx 0 76rpx;
		}
		& > view:last-child {
			flex: 1;
			height: 100rpx;
			background-color: #FCC928;
			&:active {
				opacity: 0.7;
			}
		}
	}
	
	& > .modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.4);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
		
		&.show {
			opacity: 1;
			transition-duration: 0.3s;
			-ms-transform: scale(1);
			transform: scale(1);
			overflow-x: hidden;
			overflow-y: auto;
			pointer-events: auto;
		}
		.my-post {
			// border: 1px solid  #4CD964;
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 610rpx;
			height: 806rpx;
				
			.bg {
				width: 610rpx;
				height: 806rpx;
			}
		}
		
		.close {
			position: fixed;
			width: 70rpx;
			height: 70rpx;
			left: 50%;
			margin-left: -35rpx;
			bottom: 90rpx;
		}
	}
}

</style>
